<!DOCTYPE html>
<html>
	<!-- 5. 2 作业完成情况-->
	<!-- 作者：许舒隆 -->

	<head>
		<meta charset="UTF-8">
		<title>作业完成情况</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script  type="text/javascript" src="js/highcharts.js"></script>
		<link rel="stylesheet" type="text/css" href="css/mycss/JobManagement.css" />
	</head>

	<body>
		<div class="right">
			<div class="top-title">基本信息</div>
			<div class="completion-width" style="font-size: 16px;">
				<div class="message-name">名称:<span style="color:#888888;">作业1</span></div>
				<div class="message-team ">面向对象团队:<span style="color:#888888;">团队</span></div>
				<div class="message-name ">考核能力:<span style="color:#888888;">核心能力1</span></div>
			</div>
			<div class="blank-top"></div>
			<div class="top-title" style="margin-top: 20px;">完成情况</div>
			<table class="table form-completion">
				<tr class="from-tr">
					<th>序号</th>
					<th>团队</th>
					<th>成员</th>
					<th>文档类别</th>
					<th>作业链接</th>
					<th>成绩</th>
					<th>评语</th>
				</tr>
				<tr>
					<td>1</td>
					<td>团队1</td>
					<td>林晓辉</td>
					<td>-</td>
					<td>-</td>
					<td>85</td>
					<td>不错！</td>
				</tr>
				<tr>
					<td>1</td>
					<td>团队1</td>
					<td>林晓辉</td>
					<td>-</td>
					<td>-</td>
					<td>95</td>
					<td class="numberone-td">很好！ <span class="pingyu-td">NO.1</span></td>
				</tr>
				<tr>
					<td>1</td>
					<td>团队1</td>
					<td>林晓辉</td>
					<td>-</td>
					<td>-</td>
					<td>85</td>
					<td>不错！</td>
				</tr>
				<tr>
					<td>1</td>
					<td>团队1</td>
					<td>林晓辉</td>
					<td>-</td>
					<td>-</td>
					<td>85</td>
					<td>不错！</td>
				</tr>
			</table>
			<div class="blank"></div>
			<div class="top-title" style="margin-top: 15px;">成绩统计</div>
			<div id="container" style="width: 55%; height: 400px;float: left; "></div>
			<div class="biaoge-chengji">
				<table class="table table-striped">
					<tr>
						<td class="td-chenji">平均成绩</td>
						<td>85（良好）</td>	
					</tr>
					<tr>
						<td class="td-chenji">标准差</td>
						<td>7.31</td>	
					</tr>
					<tr>
						<td class="td-chenji">最高分</td>
						<td>95（优秀）</td>	
					</tr>
					<tr>
						<td class="td-chenji" >最低分</td>
						<td>60（及格）</td>	
					</tr>
					<tr>
						<td class="td-chenji">中位数</td>
						<td>85（良好）</td>	
					</tr>
				</table>
			</div>
		</div>
		<script src="./layui/layui.js"></script>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;

			});
			$(document).ready(function() {
				var chart = {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
				};
				var title = {
					text: ''
				};
				var tooltip = {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				};
				var plotOptions = {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
							style: {
								color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
							}
						},
						showInLegend:true,
					}
				};
				var series = [{
					type: 'pie',
					name: 'Browser share',
					data: [
						['100-90分', 45.0],
						['70-60分', 8.5],
						['80-70分', 6.2],
						['60分以下', 8.5],
						['90-80分', 6.2],

					]
				}];

				var json = {};
				json.chart = chart;
				json.title = title;
				json.tooltip = tooltip;
				json.series = series;
				json.plotOptions = plotOptions;
				$('#container').highcharts(json);
			});
		</script>

	</body>

</html>